import React, { PropTypes } from 'react';
import s from './zone.css';
import classNames from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { Col, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import Link from '../../components/Link';

class Zone extends React.Component {

  static propTypes = {
    zones: PropTypes.array.isRequired,
    selectedZone: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);

    let activeKey = 0;

    if (props.selectedZone) {
      props.zones.forEach((item, index) => {
        if (item.key === props.selectedZone.key) {
          return activeKey = index;
        }
      });
    }

    this.state = { activeKey };
  }

  handleSelect(eventKey) {
    console.log(eventKey);
    this.setState({ activeKey: eventKey });
  }

  build() {
    if (this.props.zones && this.props.selectedZone) {
      const nodes = [];
      this.props.zones.forEach((item, index) => {
        nodes.push((
          <NavItem key={item.key} eventKey={index}>
            {item.value}
          </NavItem>
          ));
      });

      return (nodes);
    }
    return (<div />);
  }

  render() {
    return (
      <Nav bsStyle="tabs" activeKey={this.state.activeKey} onSelect={this.handleSelect.bind(this)}>
        {this.build()}
      </Nav>
    );
  }
}

export default withStyles(s)(Zone);
